import {useState,useEffect} from 'react'
import styles from './tiezhu.module.css'
import { NavBar } from 'react-vant';
import {useNavigate,useSearchParams} from 'react-router-dom'
import axios from 'axios';
export default function Tiezhu() {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const id = searchParams.get('id')
  const [tiezi,setTiezi]=useState([])
  const [name,setName]=useState('')
//   console.log(id)
  useEffect(()=>{
     gettiezi()
  },[])
  const gettiezi=async()=>{
     let {data}=await axios.get('http://localhost:3000/findtiezi2',{params:{_id:id}})
     console.log(data)
     if(data.code==200){
        setTiezi(data.data)
        setName(data.data[0].username)
     }
  }
  return (
    <>
      <NavBar
        title="帖主详情"
        leftText="返回"
        onClickLeft={() => navigate('/app/she')}
      />
      <div className={styles.box2}>
         <img src="/public/1.png" style={{width:'100px',height:'100px',borderRadius:'50%'}} alt="" />
         <div className={styles.box}>
            <div className={styles.sbox}>
                <p>10</p>
                <p>关注</p>
            </div>
            <div className={styles.sbox}>
                <p>899</p>
                <p>粉丝</p>
            </div>
            <div className={styles.sbox}>
                <p>1.2万</p>
                <p>获赞</p>
            </div>
         </div>
      </div>
      <div className={styles.box3}>
         <p style={{fontSize:'20px',fontWeight:'bold',marginTop:'10px'}}>{name}</p>
      </div>
      <div className={styles.box4}>
         <button className={styles.btn}>+关注</button>
         <div style={{width:'200px', display:'flex',justifyContent:'space-around'}}>
            <div className={styles.btn_sbox} onClick={()=>navigate('/liaotian')}>
               <svg t="1740196804792" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5340" width="200" height="200"><path d="M768 384q-26.016 0-44.992 19.008T704 448t19.008 44.992T768 512t44.992-19.008T832 448t-19.008-44.992T768 384zM512 832q-52.992 0-108-12l-151.008 91.008 2.016-148.992q-88-52.992-139.488-135.488T64.032 448.032q0-104 60-192.512t163.008-140 224.992-51.488q186.016 0 316.992 112.512t131.008 271.488T829.024 719.52 512.032 832.032z m0-832Q372.992 0 255.008 60T68.512 223.008 0 448q0 104 51.488 195.488T192 796.992V1024l224-136q48.992 8 96 8 139.008 0 256.992-60t186.496-163.008T1024 448t-68.512-224.992T768.992 60 512 0zM256 384q-26.016 0-44.992 19.008T192 448t19.008 44.992T256 512t44.992-19.008T320 448t-19.008-44.992T256 384z m256 0q-26.016 0-44.992 19.008T448 448t19.008 44.992T512 512t44.992-19.008T576 448t-19.008-44.992T512 384z" p-id="5341" fill="#ad6607"></path></svg>
            </div>
            <div className={styles.btn_sbox}>
               <svg t="1740306185001" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5327" id="mx_n_1740306185001" width="200" height="200"><path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z" fill="#c07404" p-id="5328"></path><path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z" fill="#c07404" p-id="5329"></path></svg>
            </div>
         </div>
      </div>

      
         {
            tiezi.map((item, index) => {
               return (
                  <div key={item._id} className={styles.box6}>
                     <div className={styles.box5}>
                        <img src='/public/1.png' style={{width:'80px',height:'80px',borderRadius:'50%'}} alt="" />
                        <p style={{fontSize:'20px',marginLeft:'10px'}}>{item.username}</p>
                     </div>
                     <div className={styles.box7}>
                        <p style={{margin:'10px 0',fontSize:'16px'}}>{item.content}</p>
                        <div style={{display:'flex',justifyContent:'space-around'}}>
                           {
                              item.img.map((item2,index)=>{
                                 return <img src={item2} key={index} style={{width:'100px',height:'100px',borderRadius:'10px'}} alt="" />
                              })
                           }
                        </div>
                     </div>
                     <div className={styles.box8}>
                        <div className={styles.box10}>
                           <svg t="1740365837309" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9714" width="200" height="200"><path d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z" fill="#515151" p-id="9715"></path><path d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z" fill="#515151" p-id="9716"></path></svg>
                           <p>{item.zhuanfa}</p>
                        </div>
                        <div className={styles.box9}>
                           <div className={styles.box10}>
                              <svg t="1740366125049" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10976" width="200" height="200"><path d="M509.606998 143.114488c9.082866 0 17.327644 4.840238 20.996197 12.331863l97.262184 197.441814c5.613858 11.403724 16.663518 19.358907 29.438473 21.216207l223.738737 32.552393c8.420787 1.215688 15.604396 6.851035 18.23327 14.254655 2.520403 7.18361 0.595564 15.062044-5.084808 20.586874L730.253304 601.611947c-8.949836 8.751315-12.994965 21.171182-10.916631 33.370015l38.011732 222.060515c1.325182 7.737218-2.165316 15.426341-8.905834 19.978007-4.088108 2.741437-8.861832 4.155646-13.812587 4.155646-4.022617 0-7.999185-0.972141-11.425214-2.740414L528.149307 775.671215c-5.768377-3.006474-12.155854-4.552689-18.542308-4.552689-6.364965 0-12.727882 1.547239-18.518772 4.552689L296.254819 878.348736c-3.559059 1.855254-7.602142 2.828418-11.668761 2.828418-4.861728 0-9.723455-1.459235-13.546527-4.022617-6.961552-4.684696-10.475586-12.419867-9.127891-20.155039l38.011732-222.016513c2.078335-12.198833-1.988284-24.619724-10.939143-33.370015L125.02397 441.443038c-5.635347-5.492084-7.55814-13.348006-5.061272-20.453844 2.63092-7.481392 9.812483-13.116739 18.298761-14.332427l223.674269-32.552393c12.839423-1.857301 23.867594-9.813506 29.481452-21.216207l97.194646-197.396789C492.325403 147.965983 500.590648 143.114488 509.606998 143.114488M509.606998 104.904235c-24.043602 0-45.922912 13.226233-56.177464 33.95637L356.189863 336.302419l-223.674269 32.54216c-22.983457 3.304256-42.100864 18.718317-49.481971 39.659255-7.381108 21.048385-1.812275 44.23241 14.431687 60.033281l163.916257 160.125931-38.011732 222.016513c-3.868097 22.408359 6.03239 44.819788 25.458835 57.94676 10.69662 7.116071 23.204491 10.784624 35.757388 10.784624 10.298554 0 20.663622-2.475378 30.055526-7.337105l194.987926-102.7205L704.662463 912.072815c9.369392 4.861728 19.712971 7.337105 29.990035 7.337105 12.57541 0 25.082258-3.668553 35.778878-10.784624 19.426445-13.126972 29.305443-35.538401 25.460882-57.94676l-38.012755-222.016513 163.937746-160.125931c16.22145-15.812127 21.810748-38.984896 14.408151-60.033281-7.402597-20.940938-26.51898-36.353976-49.503461-39.659255L663.04767 336.302419l-97.240695-197.441814C555.619962 118.131491 533.695626 104.904235 509.606998 104.904235L509.606998 104.904235z" fill="#707070" p-id="10977"></path></svg>
                              <p>{item.like}</p>
                           </div>
                           <div className={styles.box10}>
                           <svg t="1740366237653" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12037" width="200" height="200"><path d="M171.712 571.648l0.352 0.32 287.904 252.8a64 64 0 0 0 82.912 1.344l296.832-244.544a215.584 215.584 0 1 0-301.824-300.576L512 316.672l-25.888-35.616a215.584 215.584 0 1 0-314.4 290.624zM32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512l-295.36 243.392a128 128 0 0 1-165.888-2.592L129.984 620.16A278.976 278.976 0 0 1 32 407.584z" fill="#707070" p-id="12038"></path></svg>
                              <p>{item.zan}</p>
                           </div>
                           <div className={styles.box10}>
                              <svg t="1740366273158" className={styles.icon} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13182" width="200" height="200"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" fill="#707070" p-id="13183"></path></svg>
                              <p>30</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  
               )
            })
         }
    </>
  )
}
